<template>
  <DragListContainer :drag-zone-id="store.dragZoneId" :diy-list="diyCertList" @on-end="handleOnEnd">
    <template #item="{ element }">
      <DraggableItem :item="element" @on-click="handleClick"></DraggableItem>
    </template>
  </DragListContainer>
</template>

<script setup lang="ts">
import DragListContainer from '@/components/DragListContainer/index.vue'
import DraggableItem from '@/components/DraggableItem/index.vue'
import { useCertStore } from '@/stores'
import { diyCertList } from '@/diy'
import type { IDiyBase } from '@/diy/types'

const store = useCertStore()

//拖动结束
const handleOnEnd = (data: any) => {
  const comp: IDiyBase = data.dragItem
  const position: any = data.position
  comp.style = {
    ...comp.style,
    ...position
  }
  store.addComponent(comp)
}

//点击
const handleClick = (comp: IDiyBase) => {
  store.addComponent(comp)
}
</script>
